<template>
    <div class="register column-center">
        <div class="top row">
            <h1>JJ</h1>
            <img src="./../assets/img/ico.png">
            <h4>账号</h4>
        </div>
        <div class="content column">
            <h1>欢迎加入JJ</h1>
            <div class="center row">
                <div class="left">
                    <el-form ref="form"
                        :rules="rules"
                        :model="form"
                        size="small"
                        label-width="60px">
                        <el-form-item label="邮箱"
                            prop="account">
                            <el-input v-model="form.account"
                                style="width:200px"></el-input>
                        </el-form-item>
                        <el-form-item label="密码"
                            prop="password">
                            <el-input v-model="form.password"
                                style="width:200px"></el-input>
                        </el-form-item>
                        <el-form-item label="名号"
                            prop="name">
                            <el-input v-model="form.name"
                                style="width:200px"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <span>第一印象很重要，起个响亮的名号吧</span>
                        </el-form-item>
                        <el-form-item>
                            <button class="btn"
                                @click="reg">注册</button>
                        </el-form-item>
                    </el-form>
                </div>
                <div class="right column">
                    <span>> 已经拥有JJ帐号?
                        <router-link class="clearline"
                            to="/login">直接登录</router-link>
                    </span>
                    <span>> 点击下载JJ移动应用</span>
                </div>
            </div>
        </div>
        <footer class="footer">
            <Footer></Footer>
        </footer>
    </div>
</template>
<script>
import Footer from "@/components/Footer"
import { mapActions } from "vuex"
export default {
    name: "register",
    components: {
        Footer
    },
    data() {
        return {
            form: {
                name: "",
                account: "",
                password: "",
                data1: "2",
                state: 1
            },
            rules: {
                name: [
                    { required: true, message: "请输入名号", trigger: "blur" },
                    {
                        min: 1,
                        max: 6,
                        message: "长度在 1 到 6 个字符",
                        trigger: "blur"
                    }
                ],
                account: [
                    { required: true, message: "请输入邮箱", trigger: "blur" },
                    {
                        min: 1,
                        max: 20,
                        message: "长度在 1 到 20 个字符",
                        trigger: "blur"
                    }
                ],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    {
                        min: 1,
                        max: 10,
                        message: "长度在 1 到 10 个字符",
                        trigger: "blur"
                    }
                ]
            }
        }
    },
    methods: {
        ...mapActions(["registered"]),
        /** 注册 */
        async reg() {
            this.$refs.form.validate(async valid => {
                if (valid) {
                    try {
                        await this.registered(this.form)
                        this.$message({
                            message: "注冊成功,请登录",
                            type: "success"
                        })
                        this.$router.push("/login")
                    } catch (error) {}
                } else {
                    return false
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
    .register {
        align-items: center;
        .top {
            width: 70vw;
            box-sizing: border-box;
            min-height: 80px;
            align-items: center;
            margin-top: 30px;
            h1 {
                font-size: 36px;
                color: #4fca6c;
            }
            img {
                width: 40px;
            }
            h4 {
                font-size: 20px;
                color: #4fca6c;
                margin-left: 30px;
            }
        }
        .content {
            box-sizing: border-box;
            min-height: calc(100vh - 280px);
            width: 70vw;
            h1 {
                font-size: 25px;
            }
            .center {
                min-height: 300px;
                width: 100%;
                .left {
                    width: 50%;
                    min-height: 300px;
                    span {
                        font-size: 12px;
                    }
                    .btn {
                        color: #ffffff;
                        background: #3fa156;
                        border: 1px solid #528641;
                        cursor: pointer;
                        font-size: 14px;
                        font-weight: bold;
                        padding: 6px 26px;
                        border-radius: 3px;
                    }
                }
                .right {
                    width: 50%;
                    min-height: 300px;
                    padding: 80px;
                    span {
                        font-size: 12px;
                    }
                }
            }
        }
        .footer {
            width: 70vw;
        }
    }
</style>
